{{ define "js" }}
  <script src="/js/vue.min.js"></script>
  <script>
    window.addEventListener("popstate", function (event) {
      event.preventDefault()
      history.back()
    })
    activateTabbarSwitcher("myTabContent", "chartTabs", "charts")
  </script>
  <script src="/js/validator.js"></script>
	<script>setValidatorStatus({{.Status}}, {{.ActivationEpoch}})</script>
  <script type="text/javascript" src="/js/datatables.min.js"></script>
  <script type="text/javascript" src="/js/datatable_input.js"></script>
  <script type="text/javascript" src="/js/datatable_loader.js"></script>
  {{ if and (ne .Status "deposited") (ne .Status "deposited_invalid") }}
    <script src="/js/highcharts/highstock.min.js"></script>
    <script src="/js/highcharts/exporting.min.js"></script>
    <script src="/js/highcharts/offline-exporting.min.js"></script>
    <script src="/js/highcharts/highcharts-global-options.js"></script>
		<script>setupDashboardButtons({{.Index }} + '')</script>
    <script>
      $(".income-chart-btn").on("click", () => {
        $("#incomeChart").removeClass("d-none")
        $("#proposedChart").addClass("d-none")
        $("#efficiencyChart").addClass("d-none")
      })
      $(".proposed-chart-btn").on("click", () => {
        $("#incomeChart").addClass("d-none")
        $("#proposedChart").removeClass("d-none")
        $("#efficiencyChart").addClass("d-none")
      })
      $(".efficiency-chart-btn").on("click", () => {
        $("#incomeChart").addClass("d-none")
        $("#proposedChart").addClass("d-none")
        $("#efficiencyChart").removeClass("d-none")
      })
    </script>
  {{ end }}
{{ end }}

{{ define "css" }}
  <link rel="stylesheet" href="/css/validator.css" />
  <link rel="stylesheet" type="text/css" href="/css/datatables.min.css" />
  <style>
    /* #TODO:stefan maybe make this prettier somehow? */
    #chartTabs .nav-link {
      padding: 0.5rem 0.8rem;
    }
    #slashings-table td:first-child {
      white-space: break-spaces;
    }
    .badge-custom {
      font-size: 12px;
      font-weight: 500;
    }
    .validator-summary-div {
      border-right-color: rgba(50, 50, 50, 0.5);
      border-right-style: solid;
    }
    .validator-border-bottom {
      border-bottom-color: rgba(50, 50, 50, 0.5);
      border-bottom-style: solid;
    }
    .validator-charts-div {
      border-right-color: rgba(50, 50, 50, 0.5);
      border-right-style: solid;
      border-top-color: rgba(50, 50, 50, 0.5);
      border-top-style: solid;
      border-bottom-color: rgba(50, 50, 50, 0.5);
      border-bottom-style: solid;
    }
    .validator-content .nav-tabs .nav-item {
      margin-top: 0 !important;
    }
    /* .overview-container {
			max-width: 600px;
		}
		.overview-container > div {
			flex: 0 1 100px;
		} */
  </style>
{{ end }}

{{ define "content" }}
  {{ with .Data }}
    <!-- possible states: deposited deposited_invalid pending slashing_offline slashing_online active_offline active_online slashed exited -->
    {{ $deposited := or (eq .Status "deposited") (eq .Status "deposited_invalid") }}
    {{ $pending := or (eq .Status "pending") (eq .Status "pending_initialized") }}
    {{ $validating := or (or (or (eq .Status "active_online") (eq .Status "active_offline")) (or (eq .Status "slashing_online") (eq .Status "slashing_offline"))) (or (eq .Status "exiting_online") (eq .Status "exiting_offline")) }}
    {{ $exited := or (eq .Status "exited") (eq .Status "slashed") }}


    <div class="container mt-2 validator-content">
      {{ template "flashMessage" . }}
      {{ template "validatorHeading" . }}
      <div class="row align-items-stretch">
        <div class="col-lg-7 col-xl-8 px-lg-2 my-2">
          <div class="card d-flex flex-column justify-content-center h-100 py-0 px-0 card-body">
            <div class="row">
              <div class="col">{{ template "validatorLifeCycleDiagram" . }}</div>
            </div>
            <div class="d-flex flex-column justify-content-center">
              {{ if $deposited }}
                {{ template "validatorOverviewDeposited" $ }}
              {{ end }}
              {{ if $pending }}
                {{ template "validatorOverviewPending" . }}
              {{ end }}
              {{ if $validating }}
                {{ template "validatorOverviewValidating" $ }}
              {{ end }}
              {{ if $exited }}
                {{ template "validatorOverviewExited" $ }}
              {{ end }}
            </div>
          </div>
        </div>
        <div class="col-lg-5 col-xl-4 px-lg-2 my-2">
          <div class="card card-body py-2 px-0 h-100 d-flex align-items-center">
            {{ if $deposited }}
              {{ template "validatorNetworkStatsTable" . }}
            {{ end }}
            {{ if $pending }}
              {{ template "validatorIncomeTable" $ }}
            {{ end }}
            {{ if $validating }}
              {{ template "validatorIncomeTable" $ }}
            {{ end }}
            {{ if $exited }}
              {{ template "validatorIncomeTable" $ }}
            {{ end }}
          </div>
        </div>
      </div>
      <div class="row align-items-stretch">
        <div class="col-lg-7 col-xl-8 px-lg-2 my-2">
          <div class="card h-100 px-0 py-0 card-body">
            <ul style="margin-top: -1px;margin-left:-1px;" class="nav nav-tabs" id="chartTabs" role="tablist">
              <li class="nav-item">
                <a class="nav-link {{ if .IncomeHistoryChartData }}active{{ else }}disabled{{ end }}" id="charts-tab" data-toggle="tab" href="#charts" role="tab" aria-controls="charts-tab-content" aria-selected="false">
                  <i class="tab-icon mr-md-2 fas fa-chart-bar"></i>
                  <span class="tab-text">Charts</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link {{ if eq .BlocksCount 0 }}disabled{{ end }}" id="blocks-tab" data-toggle="tab" href="#blocks" role="tab" aria-controls="blocks" aria-selected="false"><i class="tab-icon mr-md-1 fas fa-cubes"></i><span class="tab-text">Blocks</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link {{ if eq .AttestationsCount 0 }}disabled{{ end }}" id="attestations-tab" data-toggle="tab" href="#attestations" role="tab" aria-controls="attestations" aria-selected="false"><i class="tab-icon mr-md-1 fas fa-file-signature"></i><span class="tab-text">Atts.</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link {{ if eq .SyncCount 0 }}disabled{{ end }}" id="sync-tab" data-toggle="tab" href="#sync" role="tab" aria-controls="sync" aria-selected="false"><i class="tab-icon mr-md-1 fas fa-sync"></i><span class="tab-text">Sync</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link {{ if eq .SlashingsCount 0 }}disabled{{ end }}" id="slashings-tab" data-toggle="tab" href="#slashings" role="tab" aria-controls="slashings" aria-selected="false"><i class="tab-icon mr-md-1 fas fa-user-slash"></i><span class="tab-text">Slashings</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="deposits-tab" data-toggle="tab" href="#deposits" role="tab" aria-controls="deposits" aria-selected="false"><i class="tab-icon mr-md-1 fas fa-wallet"></i> <span class="tab-text">Deposits</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link {{ if not .EnableWithdrawalsTab }}disabled{{ end }}" id="withdrawal-tab" data-toggle="tab" href="#withdrawals" role="tab" aria-controls="withdrawals" aria-selected="false"><i class="tab-icon mr-md-1 fas fa-money-bill"></i> <span class="tab-text">Withdrawals</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link {{ if and (eq (add (len .ExecutionConsolidations) (len .ConsolidationRequests)) 0) (not .MoveToCompoundingRequest) }}disabled{{ end }}" id="consolidations-tab" data-toggle="tab" href="#consolidations" role="tab" aria-controls="consolidations" aria-selected="false"><i class="tab-icon mr-md-1 fas fa-chevron-up"></i> <span class="tab-text">Consol.</span></a>
              </li>
              {{ if .IsRocketpool }}
                <li class="nav-item">
                  <a class="nav-link" id="rocketpool-tab" data-toggle="tab" href="#rocketpool" role="tab" aria-controls="rocketpool" aria-selected="false">
                    <i class="tab-icon mr-md-1 fas fa-rocket"></i>
                    <span class="tab-text">RPL</span>
                  </a>
                </li>
              {{ end }}
            </ul>
            <div class="tab-content h-100" id="myTabContent">
              <div id="chartsTabPanel" class="tab-pane fade w-100 h-100" role="tabpanel" aria-labelledby="charts-tab">
                <div class="btn-group border rounded mt-2 ml-2 charts-btn-group" role="group" aria-label="Charts buttons group">
                  <button type="button" class="btn btn-link btn-sm border-right income-chart-btn nav-link">Income</button>
                  <button type="button" class="btn btn-link btn-sm border-right proposed-chart-btn nav-link">Proposals</button>
                  <button type="button" class="btn btn-link btn-sm efficiency-chart-btn nav-link">BeaconScore</button>
                </div>
                <div id="incomeChart" class="w-100 mb-2" aria-labelledby="incomeChart-tab">
                  {{ template "validatorIncomeChart" $ }}
                  <button type="button" id="load-income-btn" class="load-income-btn btn btn-primary btn-sm text-white d-none">Show all rewards</button>
                </div>
                <div id="proposedChart" class="w-100 mb-2 d-none" aria-labelledby="proposedChart-tab">
                  {{ template "validatorProposedChart" . }}
                </div>
                <div id="efficiencyChart" class="w-100 mb-2 d-none" aria-labelledby="efficiencyChart-tab">
                  {{ template "validatorBeaconscoreChart" . }}
                </div>
              </div>
              {{ if gt .BlocksCount 0 }}
                <div class="tab-pane fade h-100" id="blocksTabPanel" role="tabpanel" aria-labelledby="blocks-tab" aria-controls="blocks">
                  {{ template "validatorProposedTable"  . }}
                </div>
              {{ end }}
              {{ if gt .AttestationsCount 0 }}
                <div class="tab-pane fade h-100" id="attestationsTabPanel" role="tabpanel" aria-labelledby="attestations-tab" aria-controls="attestations">
                  {{ template "validatorAttestationsTable" . }}
                </div>
              {{ end }}
              {{ if gt .SyncCount 0 }}
                <div class="tab-pane fade h-100" id="syncTabPanel" role="tabpanel" aria-labelledby="sync-tab" aria-controls="sync">
                  {{ template "validatorSyncTable" . }}
                </div>
              {{ end }}
              {{ if gt .SlashingsCount 0 }}
                <div class="tab-pane fade h-100" id="slashingsTabPanel" role="tabpanel" aria-labelledby="slashings-tab" aria-controls="slashings">
                  {{ template "validatorSlashingsTable" . }}
                </div>
              {{ end }}
              <div class="tab-pane fade h-100" id="depositsTabPanel" role="tabpanel" aria-labelledby="deposits-tab" aria-controls="deposits">
                <div class="px-3">{{ template "validatorDepositsTable" $ }}</div>
              </div>
              {{ if .EnableWithdrawalsTab }}
                <div class="tab-pane fade h-100" id="withdrawalsTabPanel" role="tabpanel" aria-labelledby="withdrawal-tab" aria-controls="withdrawals">
                  <div class="px-3">{{ template "validatorWithdrawalsTable" . }}</div>
                </div>
              {{ end }}
              <div class="tab-pane fade h-100" id="consolidationsTabPanel" role="tabpanel" aria-labelledby="consolidations-tab" aria-controls="consolidations">
                <div class="px-3">{{ template "validatorConsolidationsTable" $ }}</div>
              </div>
              {{ if .IsRocketpool }}
                <div class="tab-pane fade w-100" id="rocketpoolTabPanel" role="tabpanel" aria-labelledby="rocketpool-tab" aria-controls="rocketpool">
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mt-5 mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-user-shield mr-3 text-muted"></i>Minipool Address</div>
                    <div>
                      {{ formatEth1Address .Rocketpool.MinipoolAddress }}{{ if ne .Rocketpool.RocketscanUrl "" }}<a class="no-highlight" href="https://{{ .Rocketpool.RocketscanUrl }}/minipool/{{ formatEth1AddressStringLowerCase .Rocketpool.MinipoolAddress }}" target="_blank"><i class="fas fa-rocket" role="button" data-toggle="tooltip" title="" data-original-title="More infos on Rocketscan"></i></a>{{ end }}
                    </div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-money-bill-wave mr-1 text-muted"></i>Minipool Commission</div>
                    <div>{{ formatFloat (mul .Rocketpool.MinipoolNodeFee 100) 2 }}%</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-wallet mr-2 text-muted"></i>Minipool Deposit Type</div>
                    {{ if eq (derefString .Rocketpool.MinipoolDepositType) "Empty" }}
                      <span class="badge badge-pill badge-light badge-custom mb-1">{{ .Rocketpool.MinipoolDepositType }}</span>
                    {{ else if eq (derefString .Rocketpool.MinipoolDepositType) "Half" }}
                      <span class="badge badge-pill badge-warning badge-custom text-white mb-1">{{ .Rocketpool.MinipoolDepositType }}</span>
                    {{ else }}
                      <span class="badge badge-pill badge-success badge-custom text-white mb-1">{{ .Rocketpool.MinipoolDepositType }}</span>
                    {{ end }}
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-check mr-2 text-muted"></i>Minipool Status</div>
                    {{ if eq (derefString .Rocketpool.MinipoolStatus) "Initialized" }}
                      <span class="badge badge-pill badge-success badge-custom text-white mb-1">{{ .Rocketpool.MinipoolStatus }}</span>
                    {{ else if eq (derefString .Rocketpool.MinipoolStatus) "Dissolved" }}
                      <span class="badge badge-pill badge-danger badge-custom text-white mb-1">{{ .Rocketpool.MinipoolStatus }}</span>
                    {{ else if eq (derefString .Rocketpool.MinipoolStatus) "Withdrawable" }}
                      <span class="badge badge-pill badge-warning badge-custom text-white mb-1">{{ .Rocketpool.MinipoolStatus }}</span>
                    {{ else }}
                      <span class="badge badge-pill badge-info badge-custom text-white mb-1">{{ .Rocketpool.MinipoolStatus }}</span>
                    {{ end }}
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-user-shield mr-2 text-muted"></i> Node Address</div>
                    <div>
                      {{ formatEth1Address .Rocketpool.NodeAddress }}{{ if ne .Rocketpool.RocketscanUrl "" }}<a class="no-highlight" href="https://{{ .Rocketpool.RocketscanUrl }}/node/{{ formatEth1AddressStringLowerCase .Rocketpool.NodeAddress }}" target="_blank"><i class="fas fa-rocket" role="button" data-toggle="tooltip" title="" data-original-title="More infos on Rocketscan"></i></a>{{ end }}
                    </div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-solid fa-coins mr-2 text-muted"></i>Node Deposit</div>
                    <div>{{ formatETH .Rocketpool.NodeDepositBalance }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-solid fa-users mr-2 text-muted"></i>rETH Pool Deposit</div>
                    <div>{{ formatETH .Rocketpool.UserDepositBalance }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-solid fa-chevron-left mr-2 text-muted"></i>Node Refund Balance</div>
                    <div>{{ formatETH .Rocketpool.NodeRefundBalance }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-regular fa-credit-card mr-2 text-muted"></i>Node Deposit Credit</div>
                    <div>{{ formatETH .Rocketpool.NodeDepositCredit }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-globe mr-2 text-muted mr-2 text-muted"></i>Node Timezone</div>
                    <div>{{ .Rocketpool.NodeTimezoneLocation }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-regular fa-circle mr-2 text-muted"></i>Vacant</div>
                    <div>{{ if .Rocketpool.IsVacant }}yes{{ else }}no{{ end }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-regular fa-code-branch mr-2 text-muted"></i>Delegate Version</div>
                    <div>{{ .Rocketpool.Version }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-cubes mr-2 text-muted"></i>Node RPL Stake</div>
                    <div>{{ formatRPL .Rocketpool.NodeRPLStake }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-cubes mr-2 text-muted"></i>Node RPL Effective Stake</div>
                    <div>{{ formatRPL .Rocketpool.EffectiveRPLStake }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-cubes mr-2 text-muted"></i>Node Min RPL Stake</div>
                    <div>{{ formatRPL .Rocketpool.NodeMinRPLStake }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-cubes mr-2 text-muted"></i>Node Max RPL Stake</div>
                    <div>{{ formatRPL .Rocketpool.NodeMaxRPLStake }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-cubes mr-2 text-muted"></i>Node Cumulative RPL Claimed</div>
                    <div>{{ formatRPL .Rocketpool.CumulativeRPL }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-cubes mr-2 text-muted"></i>Unclaimed RPL</div>
                    <div>{{ formatRPL .Rocketpool.UnclaimedRPL }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-exclamation-triangle mr-2 text-muted"></i>Penalties</div>
                    <div>{{ if gt .Rocketpool.PenaltyCount 0 }}<span class="text-danger">{{ .Rocketpool.PenaltyCount }}</span>{{ else }}0{{ end }}</div>
                  </div>
                  <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                    <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-solid fa-swimming-pool mr-2 text-muted"></i>Smoothing Pool Opt-In</div>
                    <div>{{ if .Rocketpool.SmoothingPoolOptIn }}✅{{ else }}❌{{ end }}</div>
                  </div>
                  {{ if .Rocketpool.SmoothingPoolOptIn }}
                    <div class="w-75 border-bottom d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                      <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-solid fa-swimming-pool mr-2 text-muted"></i>Smoothing Claimed</div>
                      <div>{{ formatETH .Rocketpool.SmoothingClaimed }}</div>
                    </div>
                    <div class="w-75 d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-between ml-4 mx-lg-auto mb-4">
                      <div class="text-nowrap font-weight-bold" style="font-size: .9rem;"><i class="fas fa-solid fa-swimming-pool mr-2 text-muted"></i>Smoothing Unclaimed</div>
                      <div>{{ formatETH .Rocketpool.SmoothingUnclaimed }}</div>
                    </div>
                  {{ end }}
                </div>
              {{ end }}
            </div>
          </div>
        </div>
        <div class="col-lg-5 col-xl-4 px-lg-2 d-flex align-items-center my-2">
          <div class="card h-100 px-0 pt-0 card-body">
            <div style="height: 42px;" class="d-flex justify-content-center align-items-center border-bottom">
              <span class="h4 text-center mb-0">Validator History</span>
            </div>
            {{ if or $validating $exited }}
              {{ template "validatorHistoryTable" $ }}
            {{ else }}
              <div class="d-flex align-items-center justify-content-center p-5">
                <svg style="width: 100%; height: auto;" id="f795efda-d52b-464f-8ed0-c83c27181fc6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 754 750.35999">
                  <defs>
                    <linearGradient id="b13d5aa8-7d59-4aa5-8b0c-a1087af90b05" x1="632.9307" y1="457.00246" x2="719.74066" y2="457.00246" gradientUnits="userSpaceOnUse">
                      <stop offset="0" stop-color="#fff" />
                      <stop offset="1" stop-color="#fff" stop-opacity="0.3" />
                    </linearGradient>
                    <linearGradient id="b216fe78-eea0-4fe3-b1f5-9d415c27bb0d" x1="578.9307" y1="243.00246" x2="665.74066" y2="243.00246" xlink:href="#b13d5aa8-7d59-4aa5-8b0c-a1087af90b05" />
                  </defs>
                  <path d="M977,451.82A376.64732,376.64732,0,0,1,655.41,824.77H553.3c-.16.13995-5.82.41-5.82.41-.94995-.13-1.91-.27-2.86-.41q-10.905-1.605-21.61-3.83a372.65332,372.65332,0,0,1-81.03-26.75c-.27-.12-.53-.25-.8-.37a371.02329,371.02329,0,0,1-41.87-22.81c-.34-.21-.67-.42-1-.63-.57-.36-1.13-.71-1.69-1.08-.18-.11-.36-.22-.54-.34A376.057,376.057,0,0,1,361.41,743.72c-.54-.43-1.07995-.88-1.62-1.32q-3.255-2.7-6.45-5.46c-.02-.01-.03-.03-.05-.04A380.6518,380.6518,0,0,1,322.32,706.82c-.03-.04-.07-.07-.1-.11a376.23856,376.23856,0,0,1-88.33-164.6c-.12-.44-.22-.87-.33-1.31A378.13889,378.13889,0,0,1,223,451.82c0-208.21,168.79-377,377-377S977,243.61,977,451.82Z" transform="translate(-223 -74.82001)" fill="#3f3d56" />
                  <path d="M634.85347,507.4362,667.824,468.83765l32.97058-38.59855L719.407,408.4496c1.02981-1.2056-.55938-3.08643-1.58915-1.88088l-32.97058,38.59855-32.97057,38.59855-18.61242,21.78951c-1.02981,1.2056.55938,3.08642,1.58915,1.88087Z" transform="translate(-223 -74.82001)" opacity="0.8" fill="url(#b13d5aa8-7d59-4aa5-8b0c-a1087af90b05)" />
                  <rect x="386.81" y="336.40997" width="34.09998" height="413.54004" fill="#2f2e41" />
                  <polygon points="409.95 488.23 409.88 500.61 409.05 650.87 408.95 668.78 408.73 709.14 408.51 749.95 406.31 749.95 406.53 709.14 406.74 671.44 406.85 650.5 407.68 500.64 407.75 488.22 409.95 488.23" fill="#ee7112" />
                  <path d="M650.03085,416.72983h-46.204c-.67058-7.23824.99769-14.528,5.2942-21.87563l1.30636-8.927h31.90275l1.50484,8.814C648.30517,400.69674,650.037,408.21681,650.03085,416.72983Z" transform="translate(-223 -74.82001)" fill="#2f2e41" />
                  <path d="M643.31814,387.02727H610.39625a2.20019,2.20019,0,0,1-2.13943-2.71366l5.54447-23.102a2.2002,2.2002,0,0,1,2.13944-1.68672h21.83293a2.2002,2.2002,0,0,1,2.13944,1.68672l5.54448,23.102A2.2002,2.2002,0,0,1,643.31814,387.02727Z" transform="translate(-223 -74.82001)" fill="#2f2e41" />
                  <path d="M626.86,347.97a11.56351,11.56351,0,0,0-11.55,11.56v11.55h23.1V359.53A11.56351,11.56351,0,0,0,626.86,347.97Z" transform="translate(-223 -74.82001)" fill="#2f2e41" />
                  <polygon points="391.051 622.109 312.765 723.714 323.592 726.213 384.388 647.927 391.051 647.927 391.051 622.109" fill="#2f2e41" />
                  <polygon points="419.831 622.109 498.117 723.714 487.29 726.213 426.494 647.927 419.831 647.927 419.831 622.109" fill="#2f2e41" />
                  <path d="M872.38,320.07v392.4a378.72351,378.72351,0,0,1-82.45,65.08V320.07Z" transform="translate(-223 -74.82001)" fill="#2f2e41" />
                  <rect x="634.38665" y="295.22386" width="54.13388" height="54.13388" fill="#2f2e41" />
                  <rect x="601.90632" y="114.5" width="12.49243" height="141.58091" fill="#2f2e41" />
                  <g opacity="0.4">
                    <path d="M796.93,320.07h-7V777.55q3.52736-2.06131,7-4.20514Z" transform="translate(-223 -74.82001)" fill="#e6e6e6" />
                    <rect x="601.90631" y="114.5" width="7" height="130.75" fill="#e6e6e6" />
                  </g>
                  <rect x="583.16767" y="309.79837" width="44.97276" height="24.98487" fill="#ee7112" />
                  <circle cx="146.93326" cy="244.84668" r="66.1926" fill="#e6e6e6" />
                  <circle cx="140.42251" cy="199.27145" r="7.59587" fill="#cbcbcb" />
                  <circle cx="153.44401" cy="275.23017" r="7.59587" fill="#cbcbcb" />
                  <circle cx="182.74237" cy="232.91031" r="5.42562" fill="#cbcbcb" />
                  <circle cx="120.89027" cy="250.27231" r="17.36199" fill="#cbcbcb" />
                  <circle cx="252.0149" cy="349.21276" r="3.57649" fill="#ee7112" />
                  <polygon points="283.012 401.093 281.227 402.866 279.454 401.081 278.264 402.263 280.037 404.048 278.252 405.821 279.434 407.011 281.219 405.238 282.992 407.023 284.182 405.841 282.409 404.056 284.194 402.283 283.012 401.093" fill="#e6e6e6" />
                  <polygon points="297.318 297.375 295.533 299.148 293.76 297.363 292.57 298.545 294.343 300.33 292.558 302.103 293.74 303.293 295.525 301.52 297.298 303.305 298.488 302.123 296.715 300.338 298.5 298.565 297.318 297.375" fill="#e6e6e6" />
                  <path d="M565.279,175.37584c-3.862,2.5732-7.81471-3.55124-3.87846-6.01018C565.26232,166.79262,569.215,172.91706,565.279,175.37584Z" transform="translate(-223 -74.82001)" fill="#e6e6e6" />
                  <polygon points="118.557 366.728 116.1 366.189 116.638 363.731 115 363.372 114.461 365.83 112.004 365.292 111.645 366.93 114.102 367.469 113.564 369.926 115.202 370.285 115.741 367.827 118.198 368.366 118.557 366.728" fill="#e6e6e6" />
                  <polygon points="494.557 71.728 492.1 71.189 492.638 68.731 491 68.372 490.461 70.83 488.004 70.292 487.645 71.93 490.102 72.469 489.564 74.926 491.202 75.285 491.741 72.827 494.198 73.366 494.557 71.728" fill="#e6e6e6" />
                  <polygon points="686.557 230.728 684.1 230.189 684.638 227.731 683 227.372 682.461 229.83 680.004 229.292 679.645 230.93 682.102 231.469 681.564 233.926 683.202 234.285 683.741 231.827 686.198 232.366 686.557 230.728" fill="#e6e6e6" />
                  <polygon points="222.46 110.506 220.003 109.967 220.541 107.51 218.903 107.151 218.364 109.608 215.906 109.07 215.547 110.708 218.005 111.247 217.467 113.705 219.105 114.063 219.644 111.606 222.101 112.144 222.46 110.506" fill="#e6e6e6" />
                  <circle cx="455.33966" cy="188.55082" r="3.57649" fill="#ee7112" />
                  <polygon points="428.557 242.728 426.1 242.189 426.638 239.731 425 239.372 424.461 241.83 422.004 241.292 421.645 242.93 424.102 243.469 423.564 245.926 425.202 246.285 425.741 243.827 428.198 244.366 428.557 242.728" fill="#e6e6e6" />
                  <polygon points="523.46 198.506 521.003 197.967 521.541 195.51 519.903 195.151 519.364 197.608 516.906 197.07 516.547 198.708 519.005 199.247 518.467 201.705 520.105 202.063 520.644 199.606 523.101 200.144 523.46 198.506" fill="#e6e6e6" />
                  <path d="M580.85347,293.4362,613.824,254.83765l32.97058-38.59855L665.407,194.4496c1.02981-1.2056-.55938-3.08643-1.58915-1.88088l-32.97058,38.59855-32.97057,38.59855-18.61242,21.78951c-1.02981,1.2056.55938,3.08642,1.58915,1.88087Z" transform="translate(-223 -74.82001)" opacity="0.8" fill="url(#b216fe78-eea0-4fe3-b1f5-9d415c27bb0d)" />
                  <rect x="385.49365" y="646.9693" width="6" height="102.02313" fill="#e6e6e6" />
                  <path d="M628.54,347.42a11.57294,11.57294,0,0,0-8.55,11.15v.1a2.21112,2.21112,0,0,0-1.51,1.58l-5.54,23.11a2.18494,2.18494,0,0,0,2.01,2.69l-.04.27-.15,1-2.26,7c-4.29,7.34-4.66,14.21-3.99,21.45h5.98V696.28l-78.04,101.3L542.19,798.9l-.91,1.18006-10.83-2.5,78.04-101.3V415.77l-4.99-.45c-.67-7.24.71-13.66,5-21l.26-7,.15-1,.04-.27a2.18494,2.18494,0,0,1-2.01-2.69l5.54-23.11a2.21112,2.21112,0,0,1,1.51-1.58v-.1a11.56351,11.56351,0,0,1,11.55-11.56A11.4326,11.4326,0,0,1,628.54,347.42Z" transform="translate(-223 -74.82001)" fill="#e6e6e6" />
                  <polygon points="431.177 646.969 425.594 646.969 425.594 647.506 485.974 725.255 491.062 724.081 431.177 646.969" fill="#e6e6e6" />
                  <path d="M737.88,783.96v18.85a374.5016,374.5016,0,0,1-82.47,21.96h-123c-3.15-.57-6.29-1.18005-9.4-1.83V783.96Z" transform="translate(-223 -74.82001)" fill="#2f2e41" />
                  <path
                    d="M632.05,725.69c-.7-.12-1.44-.24-2.2-.37-4.47-.72-9.86-1.54-16.04-2.39q-.63-.09-1.29-.18c-5.1-.69-10.71-1.39-16.76-2.08-33.17-3.73-79.5-6.72-126.78-2.61,1.17-4.7,2.25-9.4,3.27-14.08l-45.28,7.01L475.83,686.14a692.68108,692.68108,0,0,0,9.48-77.18l-24.46,3.78,25.01-12.72c1.79-32.03.95-53.35.95-53.35S405,589.2,339.58,654.2c-2.4-8.46-5.03-16.81-7.83-25.01l-35.14,29.4,28.97-46.52A689.19984,689.19984,0,0,0,293.8,541.1l-18.98,15.88,14.84-23.82c-15.02-28.35-26.76-46.17-26.76-46.17s-13.39,21.94-29.34,55.81a376.3031,376.3031,0,0,0,88.76,166.02,380.10848,380.10848,0,0,0,31.02,30.12q3.19491,2.76,6.45,5.46A377.473,377.473,0,0,0,396.08,770.96c.74.48,1.48.95,2.23,1.42a375.11665,375.11665,0,0,0,124.7,50.56c3.11.65,6.25,1.26,9.4,1.83.77.13995,1.54.28,2.31.41h12.76s5.66-.27,5.82-.41c15.85-13.87006,30.22-27.89,42.61-40.81,2.82-2.93,5.53-5.81006,8.14-8.61l-21.38-12.47,27.44,5.88c1.26-1.39,2.5-2.76,3.7-4.1,6.16-6.88,11.5-13.11,15.93-18.4.76-.92,1.5-1.8,2.21-2.66,8.07-9.74,12.51-15.68,12.51-15.68S640,727.01,632.05,725.69Z"
                    transform="translate(-223 -74.82001)"
                    fill="#2f2e41" />
                  <path d="M608.49,415.77h-5.98c-.67-7.24,1-14.53,5.29-21.87006l.96-6.57995.15-1h6l-.15,1L613.8,393.9c-4.29,7.34-5.96,14.63-5.29,21.87006h5.98" transform="translate(-223 -74.82001)" fill="#ee7112" />
                  <rect x="385.48999" y="427.5" width="6" height="73" fill="#ee7112" />
                  <circle cx="606.5" cy="114.5" r="11" fill="#ee7112" />
                </svg>
              </div>
            {{ end }}
          </div>
        </div>
      </div>

      <!-- Edit Validator Modals -->
      {{ template "validatorEditModal"  . }}
      <!-- Add Validator to Watchlist Modal -->
      {{ if .User.Authenticated }}
        {{ template "AddValidatorWatchlistModal" .AddValidatorWatchlistModal }}
      {{ end }}


      <div id="r-banner" info="{{ $.Meta.Templates }}"></div>
    </div>
  {{ end }}
{{ end }}
